<template>
  <div>
    <van-nav-bar title="轮子级" />
    <NoticeBars />

    <van-button to="/page/calendar">日历</van-button>
    <van-button to="/page/countup">滚动数字</van-button>
    <van-button to="/page/lang">切换语言</van-button>
    <van-button to="/page/changeTheme">切换主题</van-button>
    <van-button to="/page/echarts">图表</van-button>
    <van-button to="/page/ajax">原生 ajax </van-button>
    <van-button to="/page/betterScroll">betterScroll</van-button>
    <van-button to="/page/transition">transition</van-button>
    <van-button to="/page/jtLogin">登录</van-button>
    <button>{{ $t('index.title') }}</button>
    <input type="button" value="按钮" @click="print" />
    <div id="printHtml">html</div>
    <reverse-card> </reverse-card>
    <nav-card></nav-card>
    <cut-card></cut-card>
    <!-- 插槽测试 -->
    <!-- 新式插槽方式 -->
    <slotTest>
      <template slot="header" slot-scope="dd"> 123456789 {{ dd }} </template>
    </slotTest>
    <!-- 老式插槽方式 -->
    <slotTest>
      <template #header="dd"> 123456789 {{ dd }} </template>
    </slotTest>
    <button @click="show = true">show</button>
    <van-popup v-model="show" position="top">内容</van-popup>
    <!-- <accordion-card>
      <template #content>
        <div>
          是是是
        </div>
      </template>
    </accordion-card> -->

    <!-- <down-card :coin="coin" ref="down">
      <div v-for="(item, i) in data" :key="i" @click="
          coin = item.name;
          $refs.down.isShow = false;
        ">
        {{ item.name }}
      </div>
    </down-card> -->
    <!-- <slider-card :min="0" :max="100" v-model="per"></slider-card> -->
    <div @click="deb">事件间隔限制(防抖)</div>
    <div @click="thr">时间间隔限制(节流)</div>
  </div>
</template>

<script>
import { getJson } from '../../apis'
import mixin from '../../utils/mixin'
import printJS from 'print-js'
import { debounce, throttle } from '@/utils/lodashUtil'
export default {
  mixins: [mixin],
  inject: ['app'],
  data() {
    return {
      show: false,
      file: '',
      isOpen: false,
      text: true,
      coin: '',
      data: [
        {
          name: 'btc'
        },
        {
          name: 'eth'
        }
      ],
      per: 0,
      deb: debounce(this.getName, 1000), // 防抖
      thr: throttle(this.getSex, 2000), // 节流
      wsdata: null
    }
  },
  mounted() {},
  activated() {
    this.$ws.getMessage(this.receiver)
    this.$ws.send([
      // { name: 'quotes', sub: 'add', type: 'quotes' },
      { name: 'quote', sub: 'add', type: 'quote', topic: 'btcusdt' }
    ])
    getJson().then((res) => {
      console.log(res)
    })

    // setTimeout(() => {
    //   this.$ws.send([{ name: 'quotes', sub: 'add', type: 'quotes' }])
    //   this.$ws.setMessageHookFn(() => {
    //     console.log('没想到吧')
    //   })
    // }, 10000)
  },
  beforeDestroy() {
    this.$ws.send({
      name: 'quote',
      sub: 'del',
      type: 'quote',
      topic: 'btcusdt'
    })
  },
  deactivated() {
    this.$ws.send({
      name: 'quote',
      sub: 'del',
      type: 'quote',
      topic: 'btcusdt'
    })
  },
  methods: {
    print() {
      printJS('printHtml', 'html')
    },
    receiver(data) {
      if (data.data.includes('pong') || data.data.includes('ok')) return
      console.log(data.data, 'data')
    },
    getName() {
      console.log('name')
    },
    getSex() {
      console.log('sex')
    }
  }
}
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 40px;
  line-height: 300px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
